<template>
  <div>
    <!-- 搜索栏 -->
    <el-card id="search">
      <el-row>
        <el-col :span="20">
          <el-input
            v-model="searchModel.linkName"
            placeholder="店铺名字"
            clearable
          />
          <el-input
            v-model="searchModel.linkOne"
            placeholder="店铺1的链接"
            clearable
          />
          <el-input
            v-model="searchModel.linkTwo"
            placeholder="店铺2的链接"
            clearable
          />
          <el-input
            v-model="searchModel.linkThree"
            placeholder="店铺3的链接"
            clearable
          />
          <el-button
            type="primary"
            round
            icon="el-icon-search"
            @click="exportCsv"
          >转换
          </el-button>
        </el-col>
      </el-row>
    </el-card>

  </div>
</template>

<script>
import tbApi from '@/api/tb'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      formLabelWidth: '130px',
      searchModel: {
        linkOne: '',
        linkTwo: '',
        linkThree: '',
        linkName: ''
      },
      linkResult: ''
    }
  },
  methods: {
    getChangeLink() {
      tbApi.getChangeLink(this.searchModel).then((response) => {
        this.linkResult = response.data.rows
      })
    },
    exportCsv() {
      // eslint-disable-next-line no-unused-vars
      const hasToken = getToken()
      // /101.201.64.236
      this.downloadPost('http://101.201.64.236:9999/prod-api/tb/changeCsv', JSON.stringify({
        'searchParams': this.searchModel,
        'X-Token': hasToken
      }))
    },
    downloadPost(action, formData) {
      const form = document.createElement('form')
      document.body.appendChild(form)
      form.appendChild(this.generateHideElement('data', formData))
      form.method = 'POST'
      form.action = action
      form.submit()
    },
    generateHideElement(name, value) {
      const inputEle = document.createElement('input')
      inputEle.type = 'hidden'
      inputEle.name = name
      inputEle.value = value
      return inputEle
    }
  }
}
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}

.el-dialog .el-input {
  width: 85%;
}
</style>
